<template>
	<view :class="AppStyle">

		<!-- 顶部文案 -->
		<view class="headtips">
			<view class="bold"></view>
			<view class="headtips-all-read" @tap="allRead"> 全部已读 </view>
		</view>

		<!-- 消息体 -->
		<view class="message-box">
			<UniListItem v-for="item in datas" :title="item.title" :note="item.content" ellipsis="1">
				<template v-slot:footer v-if="!item.isRead">
					<image class="slot-image" src="@/static/img/redIco.png" mode="widthFix" @tap="removeRedIcon(item)"></image>
				</template>
			</UniListItem>

			<view v-show="isEmpty" class="coupon-empty">
				<view class="iconfont iconwenzhangchaxun "></view>
				<view class="ns-text-color-gray">没有通知</view>
			</view>
		</view>
		<!-- 消息体 -->

	</view>
</template>

<script>
	import UniListItem from '@/components/item/uni-list-item.vue'

	export default {
		components: {
			UniListItem
		},
		data() {
			return {
				AppStyle: 'bg-wite-page commom-margin',
				isEmpty: true,
				datas: [{
					"title": "评论审核未通过",
					"content": "拜登说只有美国才是最伟大的国家，其他的都是屁,不知道各位是否同意我的观点！",
					"id": 1,
					"isRead": false,
					"messageType": 1, // 1:文本消息，无需跳转，其他暂未定
				},
				{
					"title": "评论审核未通过",
					"content": "郭嘉说了，每个人都是自由的，不自由、不平等是不可能的！",
					"id": 2,
					"isRead": true,
					"messageType": 1, // 1:文本消息，无需跳转，其他暂未定
				},
				{
					"title": "评论审核未通过",
					"content": "超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长",
					"id": 2,
					"isRead": true,
					"messageType": 1, // 1:文本消息，无需跳转，其他暂未定gao
				}]

			}
		},
		methods: {
			removeRedIcon(data) {
				uni.showToast({
					title: '设置为已读！',
					duration: 1000,
					icon: 'error',
					position: ''
				})
				data.isRead = true
			},
			allRead() {
				uni.showToast({
					title: '全部设置为已读！',
					duration: 1000,
					icon: 'error',
					position: ''
				})
				this.datas.forEach(item => {
					item.isRead = true
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.coupon-empty {
		text-align: center;
		line-height: 80rpx;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 10px;
		height: 10px;
	}
	
	.headtips {
		display: flex;
		
		.bold {
			width: 82%;
		}
		
		.headtips-all-read {
			font-size: 15rpx;
		}
	}
	
	.message-box {
		margin-top: 10rpx;
	}
</style>